import { defineStore } from "pinia";
import tinycolor from "tinycolor2";
import { omit } from "lodash";
import { Slide, SlideTheme, PPTElement, PPTAnimation } from "@/types/slides";
import { slide } from "@/mocks/slides";
import { theme } from "@/mocks/theme";
import { layouts } from "@/mocks/layout";
import { useScreenStore } from "./screen";
var screenstore: any;
interface RemoveElementPropData {
  id: string;
  propName: string | string[];
}

interface UpdateElementData {
  id: string | string[];
  props: Partial<PPTElement>;
}
interface FormatedAnimation {
  animations: PPTAnimation[];
  autoNext: boolean;
}
export interface SlidesState {
  theme: SlideTheme;
  slides: Slide[];
  slideIndex: number;
  viewportRatio: number;
  slideleft: number;
  slideTop: number;
  sheleft: number;
  shetop: number;
}
export const useSlidesStore = defineStore("slides", {
  state: (): SlidesState => ({
    theme: theme, // 主题样式
    slides: slide, // 幻灯片页面数据
    slideIndex: 0, // 当前页面索引
    viewportRatio: 0.5625, // 可视区域比例，默认16:9
    slideleft: 0,
    slideTop: 0,
    sheleft: 0,
    shetop: 0,
  }),
  getters: {
    //获取音频
    currenMusic(state) {
      return state.slides[0]?.turningMode;
    },
    // 当前幻灯片
    currentSlide(state) {
      // console.log('state11',state.slides);
      return state.slides[state.slideIndex];
    },
    // 现在的幻灯片动画
    currentSlideAnimations(state) {
      const currentSlide = state.slides[state.slideIndex];
      if (!currentSlide?.animations) return [];

      const els = currentSlide.elements;
      const elIds = els.map((el) => el.id);
      return currentSlide.animations.filter((animation) =>
        elIds.includes(animation.elId)
      );
    },

    // 格式化的当前页动画
    // 将触发条件为“与上一动画同时”的项目向上合并到序列中的同一位置
    // 为触发条件为“上一动画之后”项目的上一项添加自动向下执行标记
    // 格式化的动画
    formatedAnimations(state) {
      const currentSlide = state.slides[state.slideIndex];
      if (!currentSlide?.animations) return [];

      const els = currentSlide.elements;
      const elIds = els.map((el) => el.id);
      const animations = currentSlide.animations.filter((animation) =>
        elIds.includes(animation.elId)
      );

      const formatedAnimations: FormatedAnimation[] = [];
      for (const animation of animations) {
        if (animation.trigger === "click" || !formatedAnimations.length) {
          formatedAnimations.push({ animations: [animation], autoNext: false });
        } else if (animation.trigger === "meantime") {
          const last = formatedAnimations[formatedAnimations.length - 1];
          last.animations = last.animations.filter(
            (item) => item.elId !== animation.elId
          );
          last.animations.push(animation);
          formatedAnimations[formatedAnimations.length - 1] = last;
        } else if (animation.trigger === "auto") {
          const last = formatedAnimations[formatedAnimations.length - 1];
          last.autoNext = true;
          formatedAnimations[formatedAnimations.length - 1] = last;
          formatedAnimations.push({ animations: [animation], autoNext: false });
        }
      }
      return formatedAnimations;
    },
    // 布局
    layouts(state) {
      const { themeColor, fontColor, fontName, backgroundColor } = state.theme;

      var subColor = tinycolor(fontColor).isDark() ? "#e6e6e6" : " #B4B4B432";
      const layoutsString = JSON.stringify(layouts)
        .replaceAll("{{themeColor}}", themeColor)
        .replaceAll("{{fontColor}}", fontColor)
        .replaceAll("{{fontName}}", fontName)
        .replaceAll("{{backgroundColor}}", backgroundColor)
        .replaceAll("{{subColor}}", subColor);

      return JSON.parse(layoutsString);
    },
  },

  actions: {
    //设置边界
    setbian(left: number, top: number) {
      // '设置画布的边界'
      this.slideleft = left;
      this.slideTop = top;
    },
    setlan(left: number, top: number) {
      // 设置左边的画布比例
      this.sheleft = left;
      this.shetop = top;
    },

    // 设置主题
    setTheme(themeProps: Partial<SlideTheme>) {
      this.theme = { ...this.theme, ...themeProps };
    },
    // 设置视口比率
    setViewportRatio(viewportRatio: number) {
      this.viewportRatio = viewportRatio;
    },
    // 设置幻灯片
    setSlides(slides: Slide[]) {
      this.slides = slides;
    },
    // 添加幻灯片
    addSlide(slide: Slide | Slide[]) {
      screenstore = useScreenStore();
      screenstore.addyulan({
        id: screenstore.screenyulan.length,
        display: "none",
        timer: 10,
      });
      const slides = Array.isArray(slide) ? slide : [slide];
      const addIndex = this.slideIndex + 1;
      this.slides.splice(addIndex, 0, ...slides);
      this.slideIndex = addIndex;
    },
    // 更新幻灯片
    updateSlide(props: Partial<Slide>) {
      const slideIndex = this.slideIndex;
      if (props.background?.color) {
        const rgbaValues = props.background.color.match(/\d+/g);
        if (rgbaValues && rgbaValues.length === 4) {
          // 把rgb更改成#
          const hex =
            "#" +
            rgbaValues
              .slice(0, 3)
              .map((c) => parseInt(c).toString(16).padStart(2, "0"))
              .join("");

          props.background = { ...props.background, color: hex };
        }
      }
      this.slides[slideIndex] = { ...this.slides[slideIndex], ...props };
    },
    // 删除
    deleteSlide(slideId: string | string[]) {
      const slidesId = Array.isArray(slideId) ? slideId : [slideId];

      const deleteSlidesIndex = [];
      for (let i = 0; i < slidesId.length; i++) {
        const index = this.slides.findIndex((item) => item.id === slidesId[i]);
        deleteSlidesIndex.push(index);
      }
      let newIndex = Math.min(...deleteSlidesIndex);
      const maxIndex = this.slides.length - slidesId.length - 1;
      if (newIndex > maxIndex) newIndex = maxIndex;
      this.slideIndex = newIndex;
      this.slides = this.slides.filter((item) => !slidesId.includes(item.id));
    },
    // 更新幻灯片索引
    updateSlideIndex(index: number) {
      this.slideIndex = index;
    },
    // 添加元素
    addElement(element: PPTElement | PPTElement[]) {
      const elements = Array.isArray(element) ? element : [element];
      const currentSlideEls = this.slides[this.slideIndex].elements;
      const newEls = [...currentSlideEls, ...elements];
      this.slides[this.slideIndex].elements = newEls;
    },
    deleteElement(elementId: string | string[]) {
      const elementIdList = Array.isArray(elementId) ? elementId : [elementId];
      const currentSlideEls = this.slides[this.slideIndex].elements;
      const newEls = currentSlideEls.filter(
        (item) => !elementIdList.includes(item.id)
      );
      this.slides[this.slideIndex].elements = newEls;
    },
    // 替换文件
    updateElement(data: UpdateElementData) {
      const { id, props } = data;
      const elIdList = typeof id === "string" ? [id] : id;

      const slideIndex = this.slideIndex;
      const slide = this.slides[slideIndex];
      const elements = slide.elements.map((el) => {
        return elIdList.includes(el.id) ? { ...el, ...props } : el;
      });
      this.slides[slideIndex].elements = elements as PPTElement[];
    },
    removeElementProps(data: RemoveElementPropData) {
      const { id, propName } = data;
      const propsNames = typeof propName === "string" ? [propName] : propName;

      const slideIndex = this.slideIndex;
      const slide = this.slides[slideIndex];
      const elements = slide.elements.map((el) => {
        return el.id === id ? omit(el, propsNames) : el;
      });
      this.slides[slideIndex].elements = elements as PPTElement[];
    },
  },
});
